<template>
  <div>
    <div class="g-wrap"></div>
    <div class="g-container">
      <h2>登录</h2>
      <div class="g-username">
        <input
          name="longPhoneOrEmail"
          maxlength="64"
          placeholder="请输入手机号或邮箱"
          class="input"
        />
        <img
          src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png"
          class="g-username"
        />
      </div>
      <div class="g-password">
        <input
          name="loginPassword"
          type="password"
          maxlength="64"
          placeholder="请输入密码"
          class="input"
        />
        <img
          src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png"
          class="g-password"
        />
      </div>
      <img
        src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png"
        class="g-normal"
      />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
// .g-wrap {
//   position: fixed;
//   top: 0;
//   left: 0;
//   bottom: 0;
//   right: 0;
//   background: rgba(0, 0, 0, 0.3);
// }
.g-container {
  position: relative;
  width: 318px;
  height: 370px;
  padding: 20px;
  margin: 100px auto;
  box-sizing: border-box;
  background: #fff;
  z-index: 10;

  h2 {
    font-size: 20px;
    margin-bottom: 30px;
  }

  input {
    outline: none;
    padding: 10px;
    font-size: 16px;
    width: 100%;
    border: 1px solid #e9e9e9;
    box-sizing: border-box;
  }

  img {
    position: absolute;
    top: -20%;
    left: 50%;
    width: 120px;
    height: 95px;
    transform: translateX(-50%);
  }

  .g-username {
    margin-bottom: 10px;

    img {
      display: none;
      height: 113px;
    }

    &:focus-within {
      input {
        border-color: #007fff;
      }
      img {
        display: block;
      }
      & ~ img {
        display: none;
      }
    }
  }
  .g-password {
    margin-bottom: 10px;

    img {
      display: none;
      height: 84px;
      width: 103px;
      top: -15%;
    }

    &:focus-within {
      input {
        border-color: #007fff;
      }
      img {
        display: block;
      }
      & ~ img {
        display: none;
      }
    }
  }
}
</style>